<template>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M18.4545 7.28571H12.7273V14.8173L15.1223 12.2303C15.2598 12.0892 15.4429 12.0117 15.6325 12.0143C15.8222 12.0169 16.0033 12.0995 16.1375 12.2444C16.2716 12.3892 16.348 12.585 16.3504 12.7899C16.3528 12.9948 16.2811 13.1926 16.1505 13.3411L12.5141 17.2697C12.3777 17.4169 12.1928 17.4996 12 17.4996C11.8072 17.4996 11.6223 17.4169 11.4859 17.2697L7.84955 13.3411C7.71891 13.1926 7.64716 12.9948 7.64959 12.7899C7.65202 12.585 7.72843 12.3892 7.86254 12.2444C7.99665 12.0995 8.17785 12.0169 8.36749 12.0143C8.55714 12.0117 8.74023 12.0892 8.87773 12.2303L11.2727 14.8173V7.28571H5.54545C4.87058 7.28649 4.22355 7.57648 3.74634 8.09203C3.26913 8.60759 3.00072 9.30661 3 10.0357V20.25C3.00072 20.9791 3.26913 21.6781 3.74634 22.1937C4.22355 22.7092 4.87058 22.9992 5.54545 23H18.4545C19.1294 22.9992 19.7764 22.7092 20.2537 22.1937C20.7309 21.6781 20.9993 20.9791 21 20.25V10.0357C20.9993 9.30661 20.7309 8.60759 20.2537 8.09203C19.7764 7.57648 19.1294 7.28649 18.4545 7.28571Z"
      fill="currentColor" />
    <path
      d="M12.7273 1.78571C12.7273 1.57733 12.6507 1.37748 12.5143 1.23013C12.3779 1.08278 12.1929 1 12 1C11.8071 1 11.6221 1.08278 11.4857 1.23013C11.3494 1.37748 11.2727 1.57733 11.2727 1.78571V7.28571H12.7273V1.78571Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
